import React, { Component } from 'react';
import {
    MineContair,
    UnLogin,
    OrderBlock,
    PropertyBlock,
    ListBlock,
    Title,
    Hink,
    MyHeader
} from './MyStyle'
//路由
import { Link } from 'react-router-dom'
import cookie from 'react-cookies'

class Mine extends Component {
    constructor() {
        super()
        this.state = {
            orderDatas: [
                {
                    id: 1,
                    iClass: 'unpaid',
                    text: '待付款'
                },
                {
                    id: 2,
                    iClass: 'unconfirm',
                    text: '待收货'
                },
                {
                    id: 3,
                    iClass: 'uncomment',
                    text: '待评价'
                },
                {
                    id: 4,
                    iClass: 'refund',
                    text: '退货/退款'
                }
            ],
            listData: [
                {
                    id: 1,
                    iClass: 'rmaservice',
                    text: '售后服务'
                },
                {
                    id: 2,
                    iClass: 'feedback',
                    text: '意见反馈'
                },
                {
                    id: 3,
                    iClass: 'address',
                    text: '收货地址'
                },
                {
                    id: 4,
                    iClass: 'logout',
                    text: '退出登录'
                },
                {
                    id: 5,
                    iClass: 'tel',
                    text: '400-123-8888'
                }
            ],
            loginStatus: false
        }
    }

    mineGoBack = () => {
        const { go } = this.props.history
        go(-1)
    }
    mineGoHome = () => {
        const { push } = this.props.history
        push('/home/homemain/today')
    }

    renderItem = () => {
        return this.state.orderDatas.map(item => {
            return (
                <a key={item.id} href="#">
                    <i className={item.iClass}></i>
                    <span>{item.text}</span>
                </a>
            )
        })
    }

    renderList = () => {
        return this.state.listData.map(item => {
            return (
                <a key={item.id} href="#" onClick={() => { item.id === 4 && this.exit() }}>
                    <span>
                        <i className={item.iClass}></i>
                        <span>{item.text}</span>
                    </span>
                    <i className="right_arrow"></i>
                </a>
            )
        })
    }

    exit = () => {
        if (cookie.load('username', { path: '/' })) {
            if (window.confirm('您确定要退出吗？')) {
                cookie.remove('username', { path: '/' })
                cookie.remove('password', { path: '/' })
                this.setState({
                    loginStatus: false
                })
            }
        }
    }

    componentDidMount() {
        document.title = '我的聚美'
        if (cookie.load('username') && cookie.load('password')) {
            this.setState({
                loginStatus: true
            })
        }
    }

    render() {
        return (
            <MineContair>
                <UnLogin>
                    <MyHeader>
                        <i className="mine_back" onClick={this.mineGoBack}></i>
                        <span>我的聚美</span>
                        <i className="mine_home" onClick={this.mineGoHome}></i>
                    </MyHeader>
                    {
                        this.state.loginStatus
                        &&
                        <div className="afterlogin">
                            <img src="/img_my/pink_200_200.png" />
                            <div className="userinfo">
                                <div>
                                    <span className="name">{cookie.load('username')}</span>
                                    <span className="grade">普通会员</span>
                                </div>
                            </div>
                            <div className="icons">
                                <div>
                                    <a>
                                        <i className="wish"></i>
                                        <span>心愿单</span>
                                    </a>
                                    <a>
                                        <i className="start"></i>
                                        <span>开售提醒</span>
                                    </a>
                                    <a>
                                        <i className="collection"></i>
                                        <span>收藏</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        ||
                        <div className="beforelogin">
                            <div className="headPortrait"></div>
                            <div className="operation">
                                <Link to="/mine/register">注册</Link>
                                <div className="separator"></div>
                                <Link to="/mine/login">登录</Link>
                            </div>
                        </div>
                    }
                </UnLogin>
                <OrderBlock>
                    <Title>
                        <div>
                            <i></i>
                            <span>我的订单</span>
                        </div>
                        <Link
                            to="/order"
                        >
                            <span>查看我的全部订单</span>
                            <i className="right_arrow"></i>
                        </Link>
                    </Title>
                    <div className="orderContent">
                        {this.renderItem()}
                    </div>
                </OrderBlock>
                <PropertyBlock>
                    <Title>
                        <div>
                            <i></i>
                            <span><Link to="/promocard">我的资产</Link></span>
                        </div>
                    </Title>
                    <div className="orderContent">
                        <a href="#">
                            <span>现金券</span>
                        </a>
                        <a href="#">
                            <span>红包</span>
                        </a>
                        <a href="#">
                            <span>聚美余额</span>
                        </a>
                        <a href="#">
                            <span>礼品卡</span>
                        </a>
                    </div>
                </PropertyBlock>
                <ListBlock>
                    {this.renderList()}
                </ListBlock>
                <Hink>
                    <span>客服热线400-123-8888 (8:00-22:00)</span>
                    <br />
                    <span>拨打前请记录您的UID  0</span>
                </Hink>
            </MineContair>
        )
    }
}

export default Mine